<template>
  <el-aside :width="isCollapsed && !isMobile ? '64px' : '220px'">
    <el-menu :collapse="isCollapsed && !isMobile" :unique-opened="true" router>
      <MenuItem
        v-for="item in menuList"
        :key="item.path"
        :menu-item="item"
      />
    </el-menu>
  </el-aside>
</template>

<script>
import MenuItem from "./MenuItem.vue";
import { mapState, mapActions } from 'vuex'

export default {
  name: 'LayoutSiderMenu',
  components: { MenuItem },
  data() {
    return {
      isMobile: false,
    }
  },
  computed: {
    ...mapState('menu', ['isCollapsed', 'menuList'])
  },
  mounted() {
    this.checkMobile()
    window.addEventListener('resize', this.checkMobile)
    // 使用静态菜单数据
    this.setMenuList([
      { title: '首页', icon: 'el-icon-s-home', path: '/' },
      { title: '发起询标', icon: 'el-icon-edit-outline', path: '/initiate' },
      { title: '询标结果', icon: 'el-icon-document-checked', path: '/results' },
      { title: '询标回复', icon: 'el-icon-briefcase', path: '/replies' },
      { title: '统计报表', icon: 'el-icon-data-analysis', path: '/statistics' },
      { title: '系统设置', icon: 'el-icon-setting', path: '/system' }
    ])
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.checkMobile)
  },
  methods: {
    ...mapActions('menu', ['setMenuList', 'toggleCollapse']),
    checkMobile() {
      this.isMobile = window.innerWidth < 960
    },
    updateDrawer(value) {
      if (this.isMobile) {
        const desiredCollapsed = !value
        if (desiredCollapsed !== this.isCollapsed) this.toggleCollapse()
      }
    }
  }
}
</script>

<style scoped>
.close-menu {
  position: sticky;
  bottom: 0;
  background: rgba(0, 0, 0, 0.05);
  margin-top: auto;
}
</style>
